<template>
    <div class="work-box">
        <h2>组件</h2>
        {{prop1}}
        {{prop3[0]}}
        {{myValue}}
    </div>
</template>

<script>
export default {
    //自定义属性可以使用数组语法:好处：简单方便。缺点:没办法指定数据类型
    // props:['prop1','prop2'],

    //用对象写法指定数据类型

    //JS中的数据类型 Number String Boolean Undefined Null Object Symbol BigInt
    
    //Vue自定义属性支持 Number String Boolean  Object Array Function
    
    // props:{
    //     prop1:Number,
    //     prop2:String
    // }

    //定义默认值  好处:在这个组件中 如果没有传入属性 属性则等于默认值
    props:{
        prop1:{
            type:Number,
            default:10
        },
        prop2:{
            type:Boolean,
            default:true
        },
         //如果对象默认值 多次用组件 传多次属性 会出问题   浅拷贝
        //数组和对象的默认值必须是方法
        prop3:{
            type:Array,
            default(){
                return [1,2]
            }
        },
        prop4:{
            type:Object,
            default(){
                return {}
            }
        },
        // 必填项
        prop5:{
            type:String,
            required:true
        },
        myValue:{
            type:String
        }
    }
}
</script>
